<template>
  <div class="limitTIme">
    <header>
      限制时间
      <DatePicker
        style="width: 260px"
        type="datetimerange"
        format="yyyy-MM-dd HH:mm:ss"
        placeholder="请选择时间"
        :value="iTime"
        @on-change="changedata($event)"
        :options="limitAll"
      ></DatePicker>
    </header>

    <div>
      <Table width="840" border :columns="columns" :data="data3">
        <template slot="intime" slot-scope="{ row, index }">
          <DatePicker
            transfer
            style="width: 100%"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择时间"
            :value="row.rtime"
            :options="row.limit"
            @on-change="changeTime(index, $event, row)"
          ></DatePicker>
        </template>

        <template slot="action" slot-scope="{ index }">
          <div @click="delHotel(index)" class="gray">删除</div>
        </template>
      </Table>
      <Button class="create" @click="createHotel">新增</Button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  data() {
    return {
      iTime: [],
      timeMode: [],
      limit: {
        disabledDate: (date) => {
          if (this.$store.state.limitTime.limitTimes.endTime == "") {
            return date && date.valueOf() < Date.now();
          } else {
            let start = new Date(
              this.$store.state.limitTime.limitTimes.starTime
            ).valueOf();
            let end = new Date(
              this.$store.state.limitTime.limitTimes.endTime
            ).valueOf();
            return date && (date.valueOf() < start || date.valueOf() > end);
          }
        },
      },
      limitAll: {
        disabledDate: (date) => {
          return date && date.valueOf() < Date.now();
        },
      },
      columns: [
        {
          title: "时间",
          key: "startDate",
          slot: "intime",
          width: "300",
        },

        {
          title: "操作",
          key: "action",
          slot: "action",
        },
      ],
      data3: [],
    };
  },
  computed: {
    ...mapGetters(["allLimit"]),
  },
  mounted() {
    // this.initDate();
  },
  methods: {
    ...mapMutations(["resetlimitTimes", "setLimitTimes"]),
    //局部限制
    changeTime(index, val) {
      this.$set(this.data3[index], "rtime", val);
      console.log(val, "trime");

      this.handleLimitItem(val, index);
    },
    // 全局限制
    changedata(val) {
      this.iTIme = val;
      this.setLimitTimes({ starTime: val[0], endTime: val[1] });
    },
    //处理记录时间
    handleTimeMode(val) {
      this.timeMode.push(val);
    },
    // 处理时间
    handleLimitItem(val, index) {
      let start = new Date(
        this.$store.state.limitTime.limitTimes.starTime
      ).valueOf(); // 限制时间
      let end = new Date(
        this.$store.state.limitTime.limitTimes.endTime
      ).valueOf();

      let effectiveStartTime = new Date(val[0]).valueOf(); // 选择时间
      let effectiveEndTime = new Date(val[1]).valueOf(); // 选择时间

      let limit = {
        disabledDate: (date) => {
          if (this.$store.state.limitTime.limitTimes.endTime == "") {
            return date && (date.valueOf() < start || date.valueOf() > end);

            // return date && date.valueOf() > endTime && date.valueOf() < startTime;
          } else {
            console.log(effectiveEndTime, end, effectiveStartTime, start);
            //左
            if (
              effectiveStartTime - start === 0 &&
              effectiveEndTime - start > 0
            ) {
              console.log("1");
              return (
                date &&
                (date.valueOf() < effectiveEndTime || date.valueOf() > end)
              );
            } //右
            else if (
              effectiveEndTime - end === 0 &&
              end - effectiveStartTime > 0
            ) {
              console.log("2");

              return (
                date &&
                (date.valueOf() < start || date.valueOf() > effectiveStartTime)
              );
            }

            // 中间
            else if (
              effectiveEndTime - end !== 0 &&
              effectiveStartTime - start !== 0
            ) {
              console.log("3");

              return (
                date &&
                (date.valueOf() < start ||
                  (date.valueOf() < effectiveEndTime &&
                    date.valueOf() > effectiveStartTime) ||
                  date.valueOf() > end)
                // (date.valueOf() > effectiveStartTime || date.valueOf() < effectiveEndTime)
              );
            }
          }
        },
      };
      this.data3 = this.data3.map((item, idx) => {
        console.log(idx !== index, "idx !== index");
        if (idx !== index) {
          item.limit = limit;
        }
        return item;
      });
      // this.$set(this.data3[index], "limit", limit);
    },
    initDate() {
      let params = {
        limit: this.limit,
        rtime: [],
      };
      this.$set(this, "initDate", params);
    },
    createHotel() {
      let newObj = {
        rtime: [],
        limit: this.limit,
      };
      this.data3.push(newObj);
      console.log(this.data3, ";this.data3");
    },

    delHotel(value) {
      this.reduceArr(value, this.data3);
    },
    reduceArr(index, Arr, delArr) {
      let res = Arr.splice(index, 1);
    },
  },
};
</script>

<style>
</style>